<template>
	<view style="flex: 1;">
		<view class="formlist inputtext" :class="className?className:''">
			<view class="formgroup" @tap="staticSelectClick">
				<view class="labletitle" v-if="showLabel">
					<label>{{label}}</label>
					<text class="required" v-show="required">*</text>
				</view>
				<view class="controlvalue">
					<input type="text" v-if="jnpfKey == 'date'" v-model="valueTitle" :placeholder="placeholder"
						:disabled="disabled" :name="vModel">
					<input type="text" v-else-if="jnpfKey == 'time'" v-model="valueTitle" :disabled="disabled"
						:placeholder="placeholder" :name="vModel">
				</view>
				<view v-if="showArrow" class="advanceicon iconfont icon-xiangyou"></view>
			</view>
		</view>
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>
	</view>
</template>

<script>
	import wPicker from '@/components/w-picker/w-picker.vue'
	export default {
		props: {
			value: '',
			jnpfKey: {
				type: String,
				default () {
					return ''
				}
			},
			placeholder: {
				type: String,
				default () {
					return '请选择'
				}
			},
			label: {
				type: String,
				default () {
					return ''
				}
			},
			vModel: {
				type: String,
				default () {
					return ''
				}
			},
			disabled: {
				type: Boolean,
				default () {
					return false
				}
			},
			required: {
				type: Boolean,
				default () {
					return false
				}
			},
			showLabel: {
				type: Boolean,
				default () {
					return true
				}
			},
			showArrow: {
				type: Boolean,
				default () {
					return true
				}
			},
			className: {
				type: String,
				default () {
					return ''
				}
			}
		},
		data() {
			return {
				pickerList: [],
				mode: '',
				isSearchShow: false,
				dataList: [],
				valueTitle: '',

			};
		},
		created() {
			// this.handle(this.value);
			if (this.value != null || this.value != undefined || this.value != '') {
				this.handle(this.value);
			}
		},
		watch: {
			value(val) {
				// this.handle(val);
				if (val != null || val != undefined || val != '') {
					this.handle(val);
				}
			}
		},
		methods: {
			handle(val) {
				const vModel = this.vModel;
				let _type = "hh-mm-ss";
				if (vModel.indexOf('timeField') >= 0) {
					// let time = this.$helper.time_to_sec(val,_type);时分秒时间戳
					this.valueTitle = val;
				} else {
					_type = "yyyy-MM-dd";
					let _value = this.$helper.toDate(val, _type);
					this.valueTitle = _value;
				}
			},

			staticSelectClick() {
				const jnpfKey = this.jnpfKey;
				switch (jnpfKey) {
					case 'date':
						this.mode = 'date';
						break;
					case 'time':
						this.mode = 'time';
						break;
				}
				this.$refs.picker.show();

				/* 清除子组件事件 */
				this.$eventHub.$off('popupmodality');

				/* 添加事件 */
				this.$eventHub.$on('popupmodality', (data) => {
					if (jnpfKey == 'date') {
						this.valueTitle = data.result;
						// let result = Date.parse(data.result);
						this.$emit('input', this.valueTitle);
					} else {
						this.valueTitle = data.result
						// let time = this.$helper.time_to_sec(data.result);时分秒时间戳
						this.$emit('input', this.valueTitle);
					}

					/* 清除子组件事件 */
					this.$eventHub.$off('popupmodality');
				});
			}
		}
	}
</script>

<style>
	.required {
		color: red;
	}

	.controlvalue input {
		color: #333;
	}
</style>